<template>
<div class="sidebar" v-bind:class="classToggle" >

    <div class='sliderContent' @mouseenter="toggleCollapse('2')" @mouseleave="toggleCollapse('2')">
        <!--<a href="#/home/homepage" class="logo">
            <span class="logo-mini"><i class="fa fa-book mini" aria-hidden="true"></i></span>
            <span class="logo-lg"><i class="fa fa-book" aria-hidden="true"></i> <b>招商局</b>HR系统</span>
        </a>-->
        <router-link  class="logo"  to="/home/homepage">
            <span class="logo-mini"><i class="fa fa-book mini" aria-hidden="true"></i></span>
            <span class="logo-lg"><b>招商局</b>HR系统</span>  	
        </router-link>         
        <div class='main-sider' >
            <div class='topTitle'>导航栏</div>
            <div class="barBox">
                <el-menu :default-active="defaultActive" :default-openeds="defaultOpenMenu" :unique-opened="bol" class="el-menu-vertical-demo" @select="sidebarSelect">

                    <!--<el-submenu  :index="menuIndexFilter(item2.menuSort)" v-for="item2 in menuData" :key="item2.menuSort" v-if="item2.childList.length>0?true:false">
                        <template slot="title"><a class="router"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.menuName}}</a></template>
                        <el-menu-item :index="menuIndexFilter(item2.menuSort,item3.menuSort)" v-for="item3 in item2.childList"><router-link class="router" :to="item3.menuUrl+'&target='+menuIndexFilter(item2.menuSort,item3.menuSort)"><i class="fa" :class="item3.menuIconCls" aria-hidden="true"></i>{{item3.menuName}}</router-link></el-menu-item>                          
                    </el-submenu>
                    <el-menu-item :index="menuIndexFilter(item2.menuSort)"  :key="item2.menuSort" v-else><router-link class="router" :to="item2.menuUrl"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.menuName}}</router-link></el-menu-item>   -->
                    <v-tree  :value="menuData"></v-tree>

                </el-menu>
            </div>
        </div>
        <div class='mini-menu'>
            <ul>
                <li><a href="#"><i class="fa fa-book"></i></a></li>
                <li><a href="#"><i class="fa fa-user"></i></a></li>
            </ul>  
        </div>
    </div>

    
    <a  class='collapseBtn' v-on:click="toggleCollapse('1')"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>

</template>

<script>
    // import 'Mock/mock_data'
    import Vue from 'vue'
	import {  Menu, Submenu, MenuItem, MenuItemGroup, Row} from 'element-ui' 
	Vue.use(Menu)
    Vue.use(Submenu)
    Vue.use(MenuItem)
    Vue.use(MenuItemGroup)
    Vue.use(Row)

    import Left from '@/components/public/leftNav-child'
    export default {
        name:'leftBar',
        data(){
            return {
                menuData : null,
                bol:true,
                isBig:true,
                isCollapse:false,
                count:0,
            }
        },
        computed: {
            classToggle: function () {
                return {
                'mini-slider': !this.isBig,
                'big-slider': this.isBig,
                'collapsed':this.isCollapse
                }
            },
            defaultActive :function(){
                var target = this.$route.query.target;
//              return target ? target : 124;

            },
            defaultOpenMenu: function(){
                // target.split('-')[0]
                var target = this.$route.query.target;
                // var arr = target.split('-');
                // var arr1 = [];
                // for (var i=0;i<arr.length;i++) {
                //     arr1.push(arr1[i] + )
                // }
                // return ["1","1-1"];
                // return  target ? [target.split('-')[0],target.split('-')[1]] : ["1","1-1"]       
            }
        },
        props:{
            isChangeBigWidth:{
                type:Boolean,
                default:false
            },
        },
        methods:{
            menuIndexFilter(_index,_index2){
	    		if(!_index2){
	    			return ""+_index;
	    		}
	    		return _index+"-"+_index2;
	    	},
            alterToggleWidth(){
                this.isBig = this.isBig ? false : true;
            },
            alterCollspseClass(){
                this.isCollapse = this.isCollapse ? false : true;
            },
            toggleCollapse(type){
                if (type === '2') {
                    if (this.isCollapse) {
                       this.alterToggleWidth();
                    } else {
                        return;
                    }
                } else { 
                    this.alterToggleWidth();
                    this.alterCollspseClass();
                }
                console.log(this.isChangeBigWidth,'me');
                this.$emit('update:isChangeBigWidth', !this.isChangeBigWidth)
                this.$emit('test', !this.isChangeBigWidth)
            },
            sidebarSelect:function(value,value2){
                console.log(value,value2,'tell');
                var self =this;
               
                if (value) {
                    var arr = value.split("-");
                    var length = arr.length;
                    var lastChild = arr[length -1].split(",");
                    var isnext = lastChild[0];
                    if (isnext !== '1') {
                        return;
                    }
                    var setidArr = [];
                    for (var i =0;i<arr.length;i++) {
                        setidArr.push(arr[i].split(",")[2]);
                    }
                    var topsetid = setidArr[0];
                    var parent_deptid = lastChild[1];
                    var setid = lastChild[2];
                    setid === "CM777" && (setid = ""); 

                    if ( topsetid === 'CM666'){
                        
                        // this.Axios.Get(this.URL.getMenuPostion.url).then(function(response){
                        //     var res = response.data.datas; 
                        //     for (var i=0;i<self.menuData.length;i++) {
                        //         if (self.menuData[i].setid === setid) {
                        //             self.menuData[i].childList = JSON.parse(JSON.stringify(res));
                                   
                        //             console.log(self.menuData);
                        //             break;
                        //         }
                        //     }
                        // })
                    } else if (topsetid === 'CM777') {
                                  //               
                       
                         this.Axios.StringPost(this.URL.getDeptparentBylist.url ,{setid:setid,parent_deptid:parent_deptid},true).then(function(response){
                             var res = response.data.datas; 
							// for (var i=0;i<self.menuData.length;i++) {
							//     if (self.menuData[i].setid === setid) {
							//         self.menuData[i].childList = JSON.parse(JSON.stringify(res.deptmune));
							//         self.defaultOpenMenu = [value];
							//         console.log(self.menuData);
							//         break;
							//     }
							// }
                        //     var iterate = self.menuData,indexArr=[];
                        //     for (var j=0; j<setidArr.length; j++) {
                        //         for (var k=0;k<iterate.length;k++) {
                        //             if (iterate[k].setid === setidArr[j]) {
                        //                 iterate = iterate[k].childList;
                        //                 // iterate = JSON.parse(JSON.stringify(res.deptmune));
                        //                 // iterate= JSON.parse(JSON.stringify(res.deptmune));
                        //                 indexArr.push(k);
                        //                 // self.defaultOpenMenu = [value];
                        //                 // console.log(self.menuData);
                        //                 break;
                        //             }
                        //         }
                        //     }

                        //     // for (var r=0;r<indexArr.length;r++) {
                        //     //     self.menuData[r]
                        //     // }
                       
                        //     self.iterateFunc(self.menuData,indexArr,res.deptmune)

                        //     // iterate = JSON.parse(JSON.stringify(res.deptmune));
                            
                        // })
                    })
                    
                }

            }
          }
        },
        components:{
            'v-tree':Left
        },
        mounted:function(){

            var self=this;
	    	//获取侧边菜单栏数据
			// this.Axios.Post(this.URL.getDeptparentBylist.url)
			// .then(function(res){
        	   this.Axios.Post(this.URL.leaderPortal.url,{
                    type:1,
              }).then(res=>{
                	self.menuData = res.data.datas.userHrMenuList;
                })
   
                
           

               
                // console.log(this.defaultOpenMenu,this.defaultActive);
            
                // console.log(self.menuData,'menu');
			// })
        }


    
}
</script>

<style scoped>


    .sidebar {
        position: fixed;
        top:0;
        left: 0;
        bottom: 0;

        color:#fff;
        z-index:1100;
    }


    .sidebar .collapseBtn{
        position: absolute;
        width:16px;
        height:16px;
        top: 0px;
        right: -46px;
        z-index: 1079;
        padding: 17px 15px 17px 15px;
        display: inline-block;
        background-color: #0268b3;
    }
    .sidebar .collapseBtn:hover{				
		background: rgba(0, 0, 0, 0.1);		
	}	
    .sidebar .main-sider .topTitle{
        color: #848484;
        padding: 60px 25px 10px 15px;
        font-size: 12px;
    }
    .sliderContent{
        position: absolute;
        top: 0;
        left: 0;
        overflow-y: auto;
        overflow-x: hidden;
        bottom: 0;
    }
        /*滚动条样式*/
    .sliderContent::-webkit-scrollbar {
        width: 2px;     
        height: 2px;
    }
    /*.sliderContent::-webkit-scrollbar {
		display: none;
    }*/
    .sliderContent::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(60,141,188,0.4);
        background: rgba(60,141,188,1);
    }
    .sliderContent::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.7);
        border-radius: 0;
        background: rgba(60,141,188,0.7);
    }
    .sliderContent{ 
        scrollbar-arrow-width:2px; 
        scrollbar-arrow-color:#0268b3;  
        scrollbar-face-color: #0268b3;  
        scrollbar-3dlight-color: #0268b3; 
        scrollbar-highlight-color: #0268b3;  
        scrollbar-shadow-color: #0268b3;  
        scrollbar-darkshadow-color: #0268b3;  
        scrollbar-track-color: #0268b3; 
        scrollbar-base-color:#0268b3;  
    } 
    .big-slider{
        width: 230px;
        transition: width 0.4s ease-in-out;
        background-color: #fbfdff;
    }
    .big-slider .router{
        display: inline-block;
        width: 100%;
        height: 100%;
        margin-left: -25px;
        padding: 0px 45px 0px 25px ;
    }

    .big-slider .sliderContent{
        width: 230px;
        transition: width 0.4s ease-in-out;
        background-color: #fbfdff;
    }
    .mini-slider .sliderContent{
        width: 50px;
        transition: width 0.4s ease-in-out;
        background-color: #fbfdff;
    }
    .mini-slider {
        width: 50px;
        transition: width 0.4s ease-in-out;
        background-color: #fbfdff;
    }
    .mini-slider .main-sider{
        display: none;
        opacity: 0;
        transition: all 0.4s ease-in-out;
    }
    .mini-slider .barBox{
        width: 50px;
        overflow: hidden;
        transition: width 0.4s ease-in-out;
    }
    .big-slider .barBox{
        width: 230px;
        overflow: hidden;
        transition: width 0.4s ease-in-out;
    }
    .big-slider .main-sider{
        display: block;
        opacity: 1;
        transition: all 0.4s ease-in-out;
    }
    .big-slider .mini-menu{
        display: none;
    }
    .mini-slider .mini-menu{
        display: block;
    }    
    .big-slider .logo{
        background-color: #0268b3;
        color: #ffffff;
        border-bottom: 0 solid transparent;
        transition: width 0.4s ease-in-out;
        display: block;
        float: left;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        width: 230px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        padding: 0 15px;
        font-weight: 300;
        overflow: hidden;
    }
   .mini-slider .logo{
        background-color: #0268b3;
        color: #ffffff;
        border-bottom: 0 solid transparent;
        transition: width 0.4s ease-in-out;
        display: block;
        float: left;
        height: 18px;
        font-size: 18px;
        line-height: 18px;
        text-align: center;
        width: 20px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        padding: 16px 15px;
        font-weight: 300;
        overflow: hidden;
    }
    .big-slider .logo .logo-mini{
        display:none;
    }

    .mini-slider .logo .logo-mini{
        display:block;
    }
			
    .mini-slider .logo .logo-lg{
        display:none;
    }
    .mini-slider .mini-menu{
        font-weight: 600;
        color:#000;	
        text-align: center;
        margin-top: 50px;
    }
    .mini-slider .mini-menu a{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .mini-slider .mini-menu li{
        line-height: 50px;
        height:50px;
    }


</style>
<style>
    .main-sider .el-menu{
        background-color: #fbfdff;
    }
    .main-sider .el-menu .is-opened,.main-sider .el-menu .is-opened .el-menu{
        background-color: #fbfdff;
    }
    .sidebar .main-sider .el-submenu .el-submenu__title{
        font-weight: 600;
    }
    .main-sider .el-menu .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
        -ms-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    .main-sider .el-menu .el-submenu>.el-submenu__title .el-submenu__icon-arrow {
        -ms-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    .barBox>.el-menu>div>.el-submenu .el-menu>div>.el-menu-item{
        padding-left: 20px !important;
    }
    .barBox>.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title{
        padding-left: 20px !important;
    }
    .barBox>.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title{
        padding-left: 25px !important;
    }
    .barBox>.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title+.el-menu>div>.el-submenu>.el-submenu__title{
        padding-left: 30px !important;
    }
    .barBox>.el-menu>div>.el-submenu>.el-submenu__title,.barBox>.el-menu>div>.el-menu-item{
        padding-left: 15px !important;
    }

    /*.barBox>.el-menu>div>.el-submenu:nth-child(4)>.el-submenu__title+.el-menu>div>li:not(:nth-child(2)){
       display: none;
    }*/
    
</style>



